<style lang="less">
  .ue-resource{
    .column{
      display: flex;
      flex-direction: column;
      .el-table {
        overflow-y: auto;
        flex: 1;
      }
      .el-tabs {
        margin-top: 38px;
        flex: 1;
        display: flex;
        flex-direction: column;
        .el-tabs__content {
          flex: 1;
          display: flex;
          .el-tab-pane{
            overflow-y: auto;
            flex: 1;
          }
        }
      }
    }
    .el-cascader {
      width: 100%;
    }
    .fa-search,.fa-hand-pointer-o{
      color: #20a0ff;
    }
  }
</style>

<template>
    <div class="columns ue-resource">
      <div class="column">
        <el-col :span="24" style="margin-bottom: 10px">
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button type="primary" @click="buildQuery">查询条件生成</el-button>
        </el-col>
        <ue-el-tree-table
          height="100%"
          tree-structure
          tree-expand-all
          highlight-current-row
          border
          @current-change="handleCurrentChange"
          :data-source="resourceTree">
          <el-table-column prop="val" label="资源值">
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="70">
          </el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger" @click="handleDelete(scope.$index, scope.row.id, scope.row.type)">删除</el-button>
            </template>
          </el-table-column>
        </ue-el-tree-table>
        <el-dialog :title="dialogTitle" size="tiny" :visible.sync="myFormVisible" :close-on-click-modal="false">
          <el-form :model="myForm" label-width="80px" ref="myForm">
            <el-form-item label="资源名称"
                          :rules="[{ required: true, message: '请输入资源名称', trigger: 'blur' },
                                     { max: 100, message: '长度不能超过 100 个字符', trigger: 'blur' }]"
                          prop="name">
              <el-input v-model="myForm.name"></el-input>
            </el-form-item>
            <el-form-item label="图标"
                          prop="icon">
              <el-input v-model="myForm.icon"></el-input>
            </el-form-item>
            <el-form-item label="排序"
                          prop="sort">
              <el-input v-model.number="myForm.sort"></el-input>
            </el-form-item>
            <el-form-item label="资源值"
                          :rules="[{ required: true, message: '请输入资源值', trigger: 'blur' },
                                     { max: 100, message: '长度不能超过 100 个字符', trigger: 'blur' }]"
                          prop="val">
              <el-input v-model="myForm.val"></el-input>
            </el-form-item>
            <el-form-item label="资源类型">
              <el-radio-group v-model="myForm.type">
                <el-radio label="LINK">连接</el-radio>
                <el-radio label="BUTTON">按钮</el-radio>
                <el-radio label="QUERY">查询条件</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否分组" prop="delivery" v-if="myForm.type === 'QUERY'">
              <el-col :span="3">
                <el-switch v-model="myForm.group"></el-switch>
              </el-col>
              <el-col :span="10" v-if="myForm.group">
                <el-form-item
                  prop="attr.group">
                  <el-select style="width: 200px" v-model="myForm.attr.group" filterable allow-create placeholder="组名">
                    <el-option v-for="(item,index) in groups" :key="index"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="资源属性" v-if="myForm.type === 'QUERY'">
              <el-col :span="6">
                <el-form-item prop="attr.type"
                            :rules="[{ required: true, message: '请选择查询类型', trigger: 'change' }]">
                <el-select  v-model="myForm.attr['type']" placeholder="查询类型">
                  <el-option
                    label="input"
                    value="input">
                  </el-option>
                  <el-option
                    label="select"
                    value="select">
                  </el-option>
                  <el-option
                    label="cascader"
                    value="cascader">
                  </el-option>
                  <el-option
                    label="date"
                    value="date">
                  </el-option>
                  <el-option
                    label="daterange"
                    value="daterange">
                  </el-option>
                  <el-option
                    label="addressDict"
                    value="addressDict">
                  </el-option>
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="6" v-if="myForm.attr.type === 'input'">
                <el-form-item
                  prop="attr.opt"
                  :rules="[{ required: true, message: '请选择条件', trigger: 'change' }]">
                <el-select   v-model="myForm.attr.opt" placeholder="条件">
                  <el-option
                    label="EQ"
                    value="EQ">
                  </el-option>
                  <el-option
                    label="LIKE"
                    value="LIKE">
                  </el-option>
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="6" v-if="myForm.attr.type === 'select' || myForm.attr.type === 'cascader'">
                <el-form-item
                  prop="attr.option"
                  :rules="[{ required: true, message: '请输入option', trigger: 'blur' }]">
                <el-input placeholder="option" v-model="myForm.attr.option"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="6" v-if="myForm.attr.type === 'select' || myForm.attr.type === 'cascader'">
                <el-form-item
                  prop="attr.label"
                  :rules="[{ required: true, message: '请输入label', trigger: 'blur' }]">
                <el-input placeholder="label" v-model="myForm.attr.label"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="6" v-if="myForm.attr.type === 'select' || myForm.attr.type === 'cascader'">
                <el-form-item
                  prop="attr.value"
                  :rules="[{ required: true, message: '请输入value', trigger: 'blur' }]">
                <el-input placeholder="value"  v-model="myForm.attr.value"></el-input>
              </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="父资源">
              <el-cascader
                clearable
                :options="resourceTree"
                change-on-select
                :props="props"
                v-model="pids">
              </el-cascader>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="myFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="handleSubmit">提交</el-button>
          </div>
        </el-dialog>
        <el-dialog title="查询条件生成" size="tiny" :visible.sync="buildQueryVisible" :close-on-click-modal="false">
          <el-form :model="buildQueryForm" label-width="80px" ref="buildQueryForm">
            <el-form-item label="类名称"
                          :rules="[{ required: true, message: '请输入类名称', trigger: 'blur' },
                                     { max: 100, message: '长度不能超过 100 个字符', trigger: 'blur' }]"
                          prop="clazz">
              <el-input v-model="buildQueryForm.clazz"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="buildQueryVisible = false">取消</el-button>
            <el-button type="primary" @click.native="handleBuildQuerySubmit">提交</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="column">
        <el-tabs type="border-card">
          <el-tab-pane label="按钮">
            <el-table
              highlight-current-row
              border
              :data="btnData">
              <el-table-column prop="name" label="资源名称">
              </el-table-column>
              <el-table-column prop="val" label="资源值">
              </el-table-column>
              <el-table-column prop="sort" label="排序" width="70">
              </el-table-column>
              <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                  <el-button  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button type="danger" @click="handleDelete(scope.$index, scope.row.id, scope.row.type)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="查询条件">
            <el-table
              highlight-current-row
              border
              :data="queryData">
              <el-table-column prop="name" label="资源名称">
              </el-table-column>
              <el-table-column prop="val" label="资源值">
              </el-table-column>
              <el-table-column prop="sort" label="排序" width="70">
              </el-table-column>
              <el-table-column prop="attr.group" label="分组">
              </el-table-column>
              <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                  <el-button  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button type="danger" @click="handleDelete(scope.$index, scope.row.id, scope.row.type)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
</template>

<script>
import { getResourceTree, getResourcePids, updateResource, deleteResource, getAllResources, createResourceQuerys } from '../../api/v3/Resource';

export default {
  data () {
    return {
      props: {
        value: 'id',
        label: 'name'
      },
      selectedTree: null,
      pids: [],
      myForm: {
        group: false,
        id: null,
        name: null,
        val: null,
        type: 'LINK',
        icon: null,
        sort: null,
        attr: {group: null},
        parentId: null
      },
      groups: [],
      resourceTree: [],
      btnData: [],
      queryData: [],
      dialogTitle: '',
      myFormVisible: false,
      buildQueryVisible: false,
      buildQueryForm: {
        clazz: null
      }
    };
  },
  watch: {
    pids (val) {
      if (val.length > 0) {
        this.myForm.parentId = val[val.length - 1];
      } else {
        this.myForm.parentId = null;
      }
    },
    'myForm.type': {
      deep: true,
      handler (val) {
        if (val === 'QUERY') {
          if (this.myForm.attr.type === undefined) {
            this.$set(this.myForm.attr, 'type', null);
          }
        } else {
          this.myForm.attr = {group: null};
        }
      }
    },
    'myForm.attr.type': {
      deep: true,
      handler (val) {
        if (val === 'input') {
          if (this.myForm.attr.opt === undefined) {
            this.$set(this.myForm.attr, 'opt', null);
          }
        }
        if (val === 'select' || val === 'cascader') {
          if (this.myForm.attr.option === undefined) {
            this.$set(this.myForm.attr, 'option', null);
            this.$set(this.myForm.attr, 'label', null);
            this.$set(this.myForm.attr, 'value', null);
          }
        }
      }
    }
  },
  methods: {
    buildQuery () {
      if (this.selectedTree) {
        this.buildQueryVisible = true;
        if (this.$refs.buildQueryForm) {
          this.$refs.buildQueryForm.resetFields();
        }
      } else {
        this.$message('请选择一个连接');
      }
    },
    handleBuildQuerySubmit () {
      this.$refs['buildQueryForm'].validate((valid) => {
        if (valid) {
          createResourceQuerys(this.selectedTree.id, this.buildQueryForm.clazz)
            .then(res => {
              this.$message('查询条件生成成功');
              this.buildQueryVisible = false;
              this.loadQueryResource();
            });
        }
      });
    },
    handleCurrentChange (val) {
      if (val != null) {
        this.selectedTree = val;
        this.loadBtnResource();
        this.loadQueryResource();
      }
    },
    loadBtnResource () {
      this.loadResource('EQ_type=BUTTON;EQ_parent.id=' + this.selectedTree.id, data => {
        this.btnData = data;
      });
    },
    loadQueryResource () {
      let o = {};
      this.loadResource('EQ_type=QUERY;EQ_parent.id=' + this.selectedTree.id, data => {
        this.queryData = data;
        data.filter(item => !!item.attr.group).forEach(item => {
          o[item.attr.group] = null;
        });
        this.groups = Object.keys(o);
      });
    },
    loadResource (filters, fn) {
      getAllResources({
        filters: filters,
        page: 0,
        size: 10000
      }).then(res => {
        fn(res.data);
      });
    },
    loadResourceTree () {
      getResourceTree('EQ_type=LINK').then(res => {
        this.resourceTree = res.data;
      });
    },
    handleEdit (index, row) {
      getResourcePids(row.id).then(res => {
        this.resetField();
        this.pids = res.data;
        this.dialogTitle = '修改';
        this.myForm.id = row.id;
        this.myForm.name = row.name;
        this.myForm.val = row.val;
        this.myForm.type = row.type;
        this.myForm.icon = row.icon;
        this.myForm.sort = row.sort;
        this.myForm.attr = row.attr;
        if (row.attr && row.attr.group === undefined) {
          this.$set(this.myForm.attr, 'group', null);
        }
        this.myForm.group = (row.attr && row.attr.group !== null);
        this.myFormVisible = true;
      });
    },
    handleAdd () {
      this.resetField();
      this.dialogTitle = '添加';
      this.myFormVisible = true;
      if (this.selectedTree && this.selectedTree.type === 'LINK') {
        this.pids = Object.assign([], this.selectedTree.pids);
        this.pids.push(this.selectedTree.id);
      }
    },
    resetField () {
      if (this.$refs['myForm']) {
        this.$refs['myForm'].resetFields();
        this.myForm.id = null;
        this.myForm.name = null;
        this.myForm.val = null;
        this.myForm.type = 'LINK';
        this.pids = [];
      }
    },
    handleDelete (index, id, type) {
      this.$confirm('您确认删除这个菜单及其下面的子菜单', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteResource(id).then(res => {
          if (type === 'LINK') {
            this.loadResourceTree();
            this.loadBtnResource();
            this.loadQueryResource();
          } else if (type === 'BUTTON') {
            this.loadBtnResource();
          } else if (type === 'QUERY') {
            this.loadQueryResource();
          }
        });
      });
    },
    handleSubmit () {
      if (this.myForm.id && this.myForm.parentId && this.myForm.id === this.myForm.parentId) {
        this.$message('父节点不能是自己');
        return;
      }
      if (this.myForm.attr && !this.myForm.group) {
        delete this.myForm.attr.group;
      }
      this.$refs['myForm'].validate((valid) => {
        if (valid) {
          updateResource(this.myForm).then(res => {
            this.myFormVisible = false;
            if (this.myForm.type === 'LINK') {
              this.loadResourceTree();
            } else if (this.myForm.type === 'BUTTON') {
              this.loadBtnResource();
            } else if (this.myForm.type === 'QUERY') {
              this.loadQueryResource();
            }
          });
        }
      });
    }
  },
  mounted () {
    this.loadResourceTree();
  }
};
</script>
